<template>
  <div class="flex items-center justify-between area-top">
    <strong
      class="text-5A6F82 hover:underline hover:text-3d82ea text-14"
      @click="handleNoLink"
      v-if="sub"
      ><LabelCopy :text="textLeft"
    /></strong>
    <strong
      class="text-3d82ea hover:underline text-14"
      @click="handleNoLink"
      v-else
      ><LabelCopy :text="textLeft"
    /></strong>
    <span v-if="textCenter" class="mark">{{ textCenter }}</span>
    <span
      class="flex-1 text-right font-12"
      :class="colorParams[textRightType]"
      >{{ textRight }}</span
    >
  </div>
</template>

<script>
import LabelCopy from "./label-copy.vue";

export default {
  name: "area-top",
  components: {
    LabelCopy,
  },
  props: {
    textLeft: {
      type: String,
      default: "",
    },
    textCenter: {
      type: String,
      default: "",
    },
    textRight: {
      type: String,
      default: "",
    },
    textRightType: {
      type: String,
      default: "黑色",
    },
    sub: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    colorParams() {
      return {
        黄色: "text-E7A11A",
        绿色: "text-19AA8D",
        红色: "text-FF4656",
        黑色: "color-333333",
      };
    },
  },
  methods: {
    handleNoLink(no) {},
  },
};
</script>

<style lang="scss" scoped>
.area-top {
  .mark {
    margin-left: 8px;
    padding: 2px 4px;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #d3dfeb;
    font-size: 12px;
    color: #5a6f82;
  }
}
</style>
